<template>
  <div>
    <div class="welcome">
      <div class="w1200">
        <div class="brief">
          <b>{{meta.title}}</b>
          <span>{{ meta.subtitle }}</span>
        </div>
        <div class="help">
        </div>
      </div>
    </div>
    <div class="w1200">
<!--      <Hot/>-->
    </div>
  </div>

</template>

<script>
import Hot from '~/components/Hot'
export default {
  name: 'Welcome',
  components: { Hot },
  props:{
    meta:{}
  }
}
</script>

<style scoped>
.welcome{
  height: 130px;
  background: #4950a3;;
  position: relative;
  margin-bottom: 3px;
  top: 0;
}
.w1200{
  width: 1200px;
  margin: 0 auto;
}
.brief{
  background: url(https://www.cnbeta.com/images/category/movie.png) no-repeat left center;
  padding-left: 95px;
  width: 215px;
  height: 130px;
  position: relative;
}
.help{
  width: 980px;
  position: absolute;
  right: 0;
  top: 0;
  height: 130px;
  padding: 20px 0;
  overflow: hidden;
}
.brief > b{
  font-size: 25px;
  color: #fff;
  transform: translateY(-50%);
  top: 50%;
  position: relative;
}
.brief > span{
  display: block;
  font-size: 17px;
  color: #fff;
  margin: 2px 0 0;
}
.brief > b{
  font-weight: bold;
  box-sizing: border-box;
  transition: all 0.2s;
}
</style>
